<template>
  <div class="tablePageWarp" style="padding-top: 12px;">
    <div>
      <div class="ecuBrief">
        <span>
          {{ $t('campaignName') }}：{{ upgradeInfo.taskName || '-' }}
        </span>
        <span>
          {{ $t('upgradeECUs')+'数量' }}：{{ upgradeInfo.ecuNum || '0' }}
        </span>
        <span>
          {{ '升级成功数量' }}：{{ upgradeInfo.ecuSuccessNum || '0' }}
        </span>
        <span>
          {{ '升级失败数量' }}：{{ upgradeInfo.ecuFailNum || '0' }}
        </span>
      </div>
      <a-form layout="vertical" >
        <a-row :gutter="[16,0]">
          <!-- ECU名称 -->
          <a-col :md="4" :sm="24">
            <a-form-model-item :label="$t('ECU名称')">
              <ecu-name-select
                v-model="queryParam.ecuName"
                @change="refreshData(true)"
              ></ecu-name-select>
            </a-form-model-item>
          </a-col>
          <!-- ECUID -->
          <a-col :md="4" :sm="24">
            <a-form-model-item :label="$t('ECUID')">
              <ecu-id-select
                v-model="queryParam.ecuId"
                @change="refreshData(true)"
              ></ecu-id-select>
            </a-form-model-item>
          </a-col>
          <!-- ECU软件编码 -->
          <a-col :md="4" :sm="24">
            <a-form-model-item :label="$t('ECU软件编码')">
              <a-select
                v-model="queryParam.ecuSoftCode"
                @change="refreshData(true)"
                showSearch
                allow-clear
                optionFilterProp="children"
                :filterOption="false"
                @search="loadSoftWareCodes"
                :placeholder="$t('pleaseSelect') + $t('softwareCoding')"
                style="width: 100%"
              >
                <a-select-option
                  v-for="(item, index) in filterEcuList"
                  :key="index"
                  :value="item"
                  :title="item"
                >{{ item }}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <!-- 软件版本 -->
          <a-col :md="4" :sm="24">
            <a-form-model-item>
              <template #label>
                <span>{{ $t('软件版本') }}</span>
                <question-mark-tip
                  :tip-title="$t('需先输入ECUID,软件版本才能进行搜索')"
                  :popupContainer="getPopupContainer">
                </question-mark-tip>
              </template>
              <software-version-select
                ref="softwareVersionSelectRef"
                mode="default"
                :query="{ecuModuleId:queryParam.ecuId}"
                :time="time"
                :value="queryParam.ecuSoftVer"
                @changeoption="(val) => {
                  queryParam.ecuSoftVer = val; refreshData(true)}"
              >
              </software-version-select>
            </a-form-model-item>
          </a-col>
          <!-- 硬件版本 -->
          <a-col :md="4" :sm="24">
            <a-form-model-item :label="$t('硬件版本')">
              <a-input
                v-model="queryParam.ecuHardVer"
                :placeholder="$t('pleaseInput') + '目标车辆版本'"
                allow-clear
                @keyup.enter="refreshData(true)"/>
            </a-form-model-item>
          </a-col>
          <a-col :md="4" :sm="24" style="margin-top: 22px;">
            <div class="searchBtns">
              <a-button-group>
                <auth-button type="primary" @click="refreshData(true)">
                  <i class="iconfont icon-chazhao"></i>
                  {{ $t('inquiry') }}
                </auth-button>
                <a-button @click="handleClear">
                  <i class="iconfont icon-qingkong"></i>
                  {{ $t('clear') }}
                </a-button>
              </a-button-group>
            </div>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <div class="commonTableSty">
      <s-table
        class="h100"
        ref="table"
        :columns="columns"
        :data="loadData"
        :scrollX="900"
        :rowKey="(record, index) => index"
        size="default" >
        <template slot-scope="text" v-for="column in commonColumns" :slot="column.scopedSlots.customRender">
          <table-ellipsis :text="text || '-'" :key="column.key"></table-ellipsis>
        </template>
        <!-- 暂不开发先屏蔽 -->
        <!-- <template slot="operation" slot-scope="text, record">
          <auth-button
            type="primary"
            :ghost="true"
            size="small"
            @click="showUpgradeLogs"
          >{{ $t('升级日志') }}</auth-button>
        </template> -->
      </s-table>
    </div>
    <custom-modal
      :width="1100"
      :visible="upgradeLogsVisibal"
      title="升级日志"
      :destroyOnClose="true"
      class="largeVersionPopup"
      @cancel="shutUpgradeLogs"
      modalCls=".largeVersionPopup"
      :isOkBtn="false"
      :bodyStyle="{ height: '500px', overflowY: 'auto' }"
    >
      <upgrade-logs-pop-ups></upgrade-logs-pop-ups>
    </custom-modal>
  </div>
</template>
<script>
import { STable } from '@/components'
import moment from 'moment'
import AuthButton from '@/components/AuthButton'
import { ecuUpgradeDetails } from '@/views/vehicle/config/list'
import CustomModal from '@/components/CustomModal/index.vue'
import UpgradeLogsPopUps from '@/views/vehicle/components/UpgradeLogsPopUps.vue'
import TableEllipsis from '@/components/Ellipsis/TableEllipsis'
import EcuNameSelect from '@/views/components/EcuNameSelect.vue'
import EcuIdSelect from '@/views/components/EcuIdSelect.vue'
import SoftwareVersionSelect from '@/views/components/SoftwareVersionSelect.vue'
import QuestionMarkTip from '@/views/components/QuestionMarkTip'
const initQueryParam = {
  ecuName: undefined,
  ecuId: undefined,
  ecuHardVer: undefined,
  ecuSoftCode: undefined,
  ecuSoftVer: undefined
}
export default {
  components: {
    STable,
    AuthButton,
    CustomModal,
    UpgradeLogsPopUps,
    TableEllipsis,
    EcuNameSelect,
    EcuIdSelect,
    SoftwareVersionSelect,
    QuestionMarkTip
  },
  props: {
    taskId: {
      type: String,
      default: ''
    },
    upgradeInfo: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  computed: {
    commonColumns () {
      return this.columns.filter(item => !item.special)
    }
  },
  created () {
    this.loadSoftWareCodes('')
  },
  data () {
    return {
      moment,
      columns: [...ecuUpgradeDetails],
      // 列表数据
      tableData: [],
      queryParam: { ...initQueryParam },
      upgradeLogsVisibal: false,
      // 软件编码下拉框数据
      filterEcuList: [],
      time: Date.now()
    }
  },
  methods: {
    getPopupContainer () {
      return document.body
    },
    // 软件编码下拉数据
    loadSoftWareCodes (val) {
      this.$api.getEcuList({ softwareCode: val, pageSize: 100 }).then(res => {
        // 软件编码去重
        this.filterEcuList = new Set([...res.data].map(ecu => ecu.softwareCode))
      })
    },
    handleClear () {
      this.queryParam = { ...initQueryParam }
      this.refreshData(true)
    },
    // 打开升级日志弹窗
    showUpgradeLogs () {
      this.upgradeLogsVisibal = true
    },
    shutUpgradeLogs () {
      this.upgradeLogsVisibal = false
    },
    // 刷新
    refreshData (isToFirstPage = false) {
      const vm = this
      vm.$nextTick(() => {
        this.$refs.table.refresh(isToFirstPage)
      })
    },
    loadData (parameter) {
      const vm = this
      // 如果是全部则不传值给后端
      const JnqueryParam = JSON.parse(JSON.stringify(vm.queryParam))
      // eslint-disable-next-line no-restricted-syntax
      for (const key in JnqueryParam) {
        if (JnqueryParam[key] === '') {
          JnqueryParam[key] = undefined
        }
      }
      this.tableData = []
      const apiPromise = vm.$api.getOtaUpdateHisDetailList({ ...parameter, ...JnqueryParam, taskId: this.upgradeInfo.taskId, processId: this.upgradeInfo.processId, vin: this.upgradeInfo.vin })
      return new Promise((resolve, reject) => {
        return apiPromise.then(res => {
          if (res.data) {
            this.tableData = res.data
          }
          resolve(res)
        }).catch(err => {
          reject(err)
        })
      })
    }
  }
}
</script>
<style scoped lang="less">
.ecuBrief {
  margin-bottom: 10px;
  span{
  font-size: 16px !important;
  margin-right: 40px;
  }
}
 ::v-deep .ant-form-item-label {
  padding-bottom: 2px;
}
::v-deep .ant-form-item {
  margin-bottom: 0;
}
</style>
